<template>
<div class="category">
    <h3>{{title}}分类</h3>
    <!-- 作用域插槽：当App组件要使用games，但又不能让Category组件给传过去，就要使用作用域插槽了 -->
    <!-- 数据是插槽来定义的，样式是由数据的使用者来定义的 -->
    <!-- :games="games" 把games传给了使用者 -->
    <slot name="test1" :games="games" msg="hello!">我是默认的一些内容</slot>
    <slot name="test2" :games="games" msg="hello!">我是默认的一些内容2</slot>
</div>
</template>

<script>

export default {
    name:'Category',
    props:['title'],
    data() {
        return {
            games:['红色警戒','穿越火线','劲舞团','超级玛丽']
        }
    },
}
</script>
<style >
.category{
    background-color: skyblue;
    width: 300px;
    height: 200px;
}
h3{
    text-align: center;
    background-color: orange;
}
h4{
    text-align: center;
    background-color: gray;
}
/* 插槽中的样式在父组件和子组件都可以
    写在子组件：等元素传过来之后再添加样式，反之就是解析完的元素携带样式传过来
    img{
    width: 100%;
    height: 100%;
} */
</style>